<template>
    <div class="dingdan-box">
        <el-row>
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px">
                    <div style="width: 10px;height: 25px;background-color: #1ABC9C;float: left;margin-top: 13px;"></div>
                    <div style="margin-left: 20px">客服首页</div>
                </div>
                <div style="float: right;">
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" plain @click="returnPage"><i class="el-icon-arrow-left"></i>返回</el-button>
                    <el-button size="mini" style="background-color: #FFFFFF" class="small-button" @click="shuaxin"><i class="el-icon-refresh-right"></i>刷新</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
            <el-col :span="24">
                <div class="box1">
                    <div class="icon">
                        <i class="el-icon-hot-water" style="font-size: 70px;margin: 20px"></i>
                    </div>
                    <div class="ziti">历史接待次数</div>
                    <div style="font:20px 微软雅黑;color: #666666">{{Jilu.LishiJiedaiCishu}}</div>
                </div>
                <div class="box1">
                    <div class="icon">
                        <i class="el-icon-s-data" style="font-size: 70px;margin: 20px"></i>
                    </div>
                    <div class="ziti">历史接待人数</div>
                    <div style="font:20px 微软雅黑;color: #666666">{{Jilu.LishiJiedaiRenshu}}</div>
                </div>
                <div class="box1">
                    <div class="icon">
                        <i class="el-icon-thumb" style="font-size: 70px;margin: 20px"></i>
                    </div>
                    <div class="ziti">今日接待次数</div>
                    <div style="font:20px 微软雅黑;color: #666666">{{Jilu.JinriCishu}}</div>
                </div>
                <div class="box1">
                    <div class="icon">
                        <i class="el-icon-s-custom" style="font-size: 70px;margin: 20px"></i>
                    </div>
                    <div class="ziti">今日接待人数</div>
                    <div style="font:20px 微软雅黑;color: #666666">{{Jilu.JinriRenshu}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin: 20px 30px 0px 30px">
            <el-col :span="24" class="dingdan-box1" style="border-bottom: 2px solid #E4E4E4">
                <div class="grid-content bg-purple-dark" style="float: left;margin-left: 20px">
                    <i class="el-icon-s-grid">数据列表</i>
                </div>
                <div style="float: right">
                    <el-button type="text" size="mini" style="background-color: #FFFFFF;color: #606266;margin-right: 20px;padding: 10px;border: solid #CCCCCC 1px" class="small-button" @click="tianjiaduihua">添加</el-button>
                    <el-dialog
                            title="修改信息"
                            :visible.sync="centerDialogVisible"
                            width="70%"
                            center>
                        <div class="dialogDiv">
                            <el-form :model="KefuXinxi" @submit.native.prevent ref="form" :rules="rules">
                                <el-form-item label="客服名称" :label-width="formLabelWidth" style="width: 350px;margin-left: 33%" prop="name">
                                    <el-input autocomplete="off" v-model="KefuXinxi.name"></el-input>
                                </el-form-item>
                                <el-form-item label="修改图片" :label-width="formLabelWidth" style="width: 350px;margin-left: 33%" ref="crFile">
                                    <el-upload
                                            ref="doctypeCrfile"
                                            class="upload-demo"
                                            accept=".jpg,.png"
                                            :auto-upload="false"
                                            action="http://localhost:8091/addpagepromige"
                                            list-type="picture"
                                            :limit="1"
                                            :before-upload="beforA"
                                            :on-exceed="handleExceed"
                                            :on-preview="handlePictureCardPreview"
                                            :on-success="handleSuccess"
                                            >
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20mb</div>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogTupian">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </el-form-item>
                                <el-form-item label="客服备注" :label-width="formLabelWidth" style="width: 350px;margin-left: 33%">
                                    <el-input type="textarea" v-model="KefuXinxi.beizhu" :rows="4"></el-input>
                                </el-form-item>
                                <el-form-item label="是否启用" :label-width="formLabelWidth" style="width: 350px;margin-left: 33%">
                                    <el-select v-model="KefuXinxi.enable">
                                        <el-option
                                                v-for="item in fenlei"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="centerDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
                            </span>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <template>
            <el-table
                    :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    border
                    style="width: 1300px;margin-left: 30px"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    ref="multipleTable"
            >
                <el-table-column
                        align="center"
                        prop="fromname"
                        label="提问账号"
                        >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="toname"
                        label="客服机器人"
                        >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="sendTime"
                        label="提问时间"
                        >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="endTime"
                        label="最后一次回答时间"
                       >
                </el-table-column>
                <el-table-column
                        align="center"
                        label="停用"
                        >
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.toenable"
                                :active-value="1"
                                :inactive-value="2"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="changeSwitch(scope.row)"/>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        fixed="right"
                        label="操作"
                        >
                    <template slot-scope="scope">
                        <router-link to="/KeFuRecord"><el-button type="text" size="small">查看记录</el-button></router-link>
                        <el-button type="text" size="small" @click="shanchu(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="float: right;margin-right: 450px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[1,5,10]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length">
                </el-pagination>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        //哪个页面要刷新就引入这个
        inject:['reload'],
        data(){
            return{
                tableData: [],//渲染表格数据
                currentPage: 1,//当前是哪一页
                pagesize: 5,//每页多少条
                Jilu:{
                  LishiJiedaiCishu:"",
                  LishiJiedaiRenshu:"",
                  JinriCishu:"",
                  JinriRenshu:"",
                },
                formLabelWidth:"90px",
                centerDialogVisible:false,
                dialogImageUrl: '',
                dialogTupian:false,
                KefuXinxi:{
                    name:'',
                    beizhu:'',
                    enable:'',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入客服名称', trigger: 'blur' },
                    ],
                },
                fenlei: [{
                    value: '1',
                    label: '启用'
                },{
                    value: '2',
                    label: '禁用'
                }],
            }
        },
        methods:{
            shuaxin(){
                //刷新页面的方法
                this.reload();
            },
            returnPage(){
                //此方法用来返回上一个页面
                if (window.history.length <= 1) {
                    this.$router.push({ path: "/system/storageManagement" });
                    return false;
                } else {
                    this.$router.go(-1);
                }
            },
            handleSizeChange(val) {
                this.pagesize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            async JieDaishuju(){
                const {data:res} = await this.$http.post("/getLishijilu",{
                    "id":''
                })
                this.Jilu.LishiJiedaiCishu = res.lishiJiedaiCishu;
                this.Jilu.LishiJiedaiRenshu = res.lishiJiedaiRenshu;
            },
            async todayJieDai(){
                const {data:res} = await this.$http.post("/todayShuju",{
                    "id":''
                })
                this.Jilu.JinriCishu = res.jinricishu;
                this.Jilu.JinriRenshu =res.jinriRenshu;
            },
            async getKefu(){
                const {data:res} = await this.$http.post("/getKefu")
                this.tableData = res;
            },
            async changeSwitch(row){
                const {data:res} = await this.$http.post("/getEnable",{
                    "toid":row.toid,
                    "toenable":row.toenable
                })
                if(res!=false){
                    this.shuaxin();
                    this.$message({
                        type: 'success',
                        message: '更改成功!'
                    })
                }
            },
            async shanchu(row){
                this.$confirm('此操作删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const {data:res} = await this.$http.post("/getDeleteKefu",{
                        "id":row.id
                    })
                    if (res != false) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'

                        })
                        this.reload();
                    }
                })
            },
            tianjiaduihua(){
                this.dialogTupian = false;
                this.dialogImageUrl = '';
                this.centerDialogVisible = true;
            },
            beforA(file){
                const isLt20M = file.size / 1024 / 1024 < 20;
                if(!isLt20M){
                    this.$message.error('上传图片的大小不能超过20MB！');
                }
                return true;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`最多上传1个文件`);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogTupian = true;
            },
            onSubmit(form){
                //this.centerDialogVisible = false;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$refs.doctypeCrfile.submit();
                        this.centerDialogVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            async handleSuccess(response){
                if(response>0){
                    const {data:res} = await this.$http.post("/getAddRobot",{
                        "toname":this.KefuXinxi.name,
                        "toremarks":this.KefuXinxi.beizhu,
                        "toenable":this.KefuXinxi.enable,
                        "toid":response
                    })
                    if (res){
                        this.$message.success('添加成功');
                    }
                }
            },
            addRobot(){

            }
        },
        created() {
            this.KefuXinxi.enable = this.fenlei[0].value
            this.JieDaishuju();
            this.todayJieDai();
            this.getKefu();
        }
    }
</script>

<style scoped>
    .dingdan-box{
        width: 1360px;
    }
    .dingdan-box1{
        color: #666666;
        line-height: 50px;
        height: 50px;
        background-color: #F3F3F3;
    }
    .box1{
        width: 300px;
        height: 120px;
        margin-left: 30px;
        float: left;
        border: solid 2px #E4E4E4;
    }
    .icon{
        float: left;
        height: 120px;
        width: 100px;
        color: #1ABC9C;
    }
    .ziti{
        margin-top: 30px;
        color: #999999;
        font:20px "微软雅黑";
    }
    .dialogDiv{
        width: 100%;
        height: 60vh;
        overflow: scroll;
    }
</style>